<template>
	<view>
		<!-- 商品详情页 -->
    <!-- 1.0 图片滑动效果 -->
    <swiper class="swiper" :indicator-dots="true" :interval="3000" :duration="1000">
      <swiper-item class="swiper_item" v-for="(item,index) in goodsObj.pics" :key="item.pics_id">
        <image @tap="showBigImg(index)" class="swiper_item_image" :src="item.pics_big"></image>
      </swiper-item>
    </swiper>
    <view class="goods_info">
      <view class="goods_info_price">
        {{ goodsObj.goods_price || '' }}
      </view>
      <view class="goods_info_icons">
        <view class="iconfont icon-zhuanfa">
          <button class="button_open_type" open-type="share">分享</button>
        </view>
        <view @tap="toggleFav" class="iconfont" :class="isFav ? 'icon-shoucang' : 'icon-shoucang1'">
        </view>
      </view>
    </view>
    <view class="goods_name ell2">
      {{ goodsObj.goods_name || '' }}
    </view>
    <view class="goods_detail">
      <view class="goods_detail_title">
        图文详情
      </view>
      <view class="goods_detail_main">
        <rich-text :nodes="goodsObj.goods_introduce"></rich-text>
      </view>
    </view>
    
    <!-- 底部固定的操作栏 -->
    <view class="bottom_bar">
      <view class="icon_btn">
        <view class="iconfont icon-kefu"></view>
        <view class="icon_btn_text">联系客服</view>
        <button open-type="contact" class="button_open_type">客服功能</button>
      </view>
      <!-- 购物车页面跳转，注意这里是个 tabBar 页 -->
      <navigator url="/pages/cart/index" open-type="switchTab" class="icon_btn">
        <view class="iconfont icon-gouwuche"></view>
        <view class="icon_btn_text">购物车</view>
      </navigator>
      
      <view class="color_btn" @tap="addToCart">
        加入购物车
      </view>
      <view class="color_btn" @tap="buyNow">
        立即购买
      </view>
    </view>
	</view>
</template>

<script>
/* 
  1. 获取页面参数
  2. 根据页面参数发送获取商品详情页的网络请求
  3. 图片滑动效果
    1. 注意 swiper 标签和 image 标签的默认宽高
  4. 点击图片，预览大图。
    1. 给图片绑定点击事件
    2. wx.previewImage() 的 urls 参数只能传递 Array.<string> 类型数据。
    3. 可以通过 .map() 对数组格式进行处理
  5. CSS3颜色变量
  6. iconfont 引入使用
  7. 富文本处理
     1. ISO系统下用户无法看到 webp 图片，获取系统信息，判断是否为 ios 系统。
        是 ios 系统，把 webp 替换成 jpg
     2. 图片与图片的缝隙
        font-size:0;
        
  8. 分享按钮 button 
  9. 收藏按钮，利用本地存储记录商品收藏数据
      1. 获取本地存储中，判断当前商品是否已经被收藏过
        1. 没收藏 和 已收藏 的图片状态展示
        
  10. 加入购物车按钮，购物车列表中数据有 <选中状态> 和 <商品数量>
        购物车展示的数据：1. <选中状态> 和 <商品数量>， 商品名称，商品价格，商品图片，商品 id
      1. 获取本地存储的购物车数据
      2. 判断当前商品是否已经加入过购物车
        2.1 没有存在，商品数量初始化为 1，添加选中状态
        2.2 已经存在，商品数量累加 1
      3. 提示用户添加成功
  
*/ 

	export default {
		data() {
			return {
        // 页面参数
				options: {},
        // 商品对象
        goodsObj: {},
        urlArr:[],
        isIOS: false,
        isFav: false,
			}
		},
		onLoad(options) {
      // 获取页面参数
      this.options = options;
      // 获取系统信息
      this.checkSystem();
      // console.log(options);
      // 发送网络请求
      this.getGoodsDetail();
      
      this.checkFav();
      
		},
		methods: {
      // 立即购买需要做完支付流程后才实现
      buyNow(){
        wx.showToast({
          title:'功能升级中...'
        })
      },
      // 加入购物车按钮
      addToCart(){
        
        const cartList = uni.getStorageSync('cartList') || [];
        // [{goods_id:111,goods_name:xxx}]
        const index = cartList.findIndex(item=> item.goods_id == this.options.goods_id );
        
        // console.log('当前商品在购物车的索引',index);
        
        // 提取出需要在购物车展示的内容
        const { goods_id, goods_name, goods_price, goods_small_logo } = this.goodsObj;
        
        // 如果是新商品没有存在购物车列表中
        if(index === -1){
          cartList.push({
            // 添加选中状态
            isSelect: true,
            // 初始化数量1
            goods_count: 1,
            goods_id, 
            goods_name, 
            goods_price, 
            goods_small_logo
          });
        }else{
          // 在原来的数据基础上累加 1
          cartList[index].goods_count += 1;
        }
        
        // 更新本地存储状态
        uni.setStorageSync('cartList', cartList);
        // 提示用户加入购物车成功
        uni.showToast({
          title:"加入购物车成功",
          icon:"success",
          mask:true,
          duration:500
        });
      },
      // 检测是否为收藏状态
      checkFav(){
        // 获取本地存储的收藏列表
        const favList = uni.getStorageSync('favList') || [];
        console.log(favList);
        // 收藏列表数据  [{goods_id:1111, goods_name:商品名称}, {goods_id:1111, goods_name:商品名称}]
        
        // find 查找是否有收藏过当前商品
        const res = favList.find(item=>item.goods_id == this.options.goods_id);
        
        // console.log(res);
        if(res){
          this.isFav = true;
        }else{
          this.isFav = false;
        }
        
        
        
      },
      // 点击添加或取消收藏
      toggleFav(){
        
        // 获取本地存储的收藏列表
        const favList = uni.getStorageSync('favList') || [];
        
        // 如果是非收藏状态，就添加手册
        if(this.isFav === false){
          // 修改状态
          this.isFav = true;
          // 追加当前商品信息
          favList.push(this.goodsObj);
        }else{
          // 获取当前商品的在列表中的索引
          const index = favList.findIndex(item=>item.goods_id == this.options.goods_id);
          // console.log('收藏列表的索引',index);
          favList.splice(index, 1);
          this.isFav = false;
        }
        // 存储到本地
        uni.setStorageSync('favList',favList)
      },
      // 获取系统信息
      checkSystem(){
        // wx.getSystemInfo 的同步版本 获取系统信息
        const { system } = uni.getSystemInfoSync();
        // console.log(system);
        // 检测系统信息是否为 ios
        this.isIOS = system.toLocaleLowerCase().indexOf('ios') > -1;
        // console.log('isIOS',this.isIOS);
      },
      // 点击查看大图效果
      showBigImg(index){
        uni.previewImage({
          // 图片数组，类型要求 Array.<string>
          urls: this.urlArr,
          // 当前显示图片的链接
          current: this.urlArr[index]
        })
      },
      // 获取商品详情页
      getGoodsDetail(){
        uni.request({
          url:'https://api-hmugo-web.itheima.net/api/public/v1/goods/detail',
          data:{
            ...this.options
          }
        }).then(res=>{
          // console.log(res[1].data.message);
          const goodsObj = res[1].data.message;
          // 如果是 IOS 系统，把 webp 图片地址替换成成 jpg
          if(this.isIOS){
            goodsObj.goods_introduce = goodsObj.goods_introduce.replace(/webp/g,'jpg');
          }
          this.goodsObj = goodsObj;
          // 把每一项都是对象的数据 map 映射成每一项都是字符串的数组，用于 wx.previewImage() 接口调用
          this.urlArr = goodsObj.pics.map(item=>item.pics_big);
          // console.log(this.urlArr);
        });
      }
		}
	}
</script>

<style lang="less">
  
  // @import '@/styles/variable.less';
  
  .swiper,
	.swiper_item_image{
    width: 100vw;
    height: 100vw;
  }
  .goods_info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80rpx;
    padding: 0 20rpx;
  }
  .goods_info_price{
    // color: @mainColor;
    // CSS3 变量调用
    color: var(--mainColor);
    font-size:36rpx;
    &::before{
      content: "¥";
      font-size: 80%;
    }
  }
  .goods_info_icons{
    display: flex;
    .iconfont{
      margin: 0 20rpx;
      font-size: 50rpx;
      position: relative;
      
    }
  }
  .goods_name{
    padding: 0 20rpx;
  }
  
  .goods_detail_main{
    // 把分区列表的富文本图片与图片之间的缝隙去掉
    font-size: 0;
    // 防止定位分区遮挡住富文本的内容
    padding-bottom: 100rpx;
  }
  
  .goods_detail_title{
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .icon-shoucang{
    color:#F4BD00;
  }
  
  // 底部固定栏
  .bottom_bar{
    display: flex;
    align-items: center;
    position: fixed;
    width: 100vw;
    height: 94rpx;
    bottom:0;
    left:0;
    background-color: #fff;
    border-top:1rpx solid #ccc;
    .icon_btn{
      flex:1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    .iconfont{
      color:#666;
    }
    .icon_btn_text{
      font-size: 20rpx;
    }
    .color_btn{
      width: 196rpx;
      height: 60rpx;
      background-color:#FCAA23;
      color:#fff;
      border-radius: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin:0 20rpx;
      font-size: 26rpx;
      &:last-child{
        background-color: var(--mainColor);
      }
    }
  }
  
  
</style>
